<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <!--引入jquery-->
    <script type="application/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <!--引入弹窗-->
    <script type="application/javascript" src="../js/sweetalert.min.js"></script>
    <!--引入后台公用模块-->
    <script type="application/javascript" src="../js/backCommon.js"></script>
    <!--引入user_list.js-->
    <script type="application/javascript" src="../js/user_list.js"></script>

</head>
<body>
<div class="layui-form-pane">
    <div class="layui-form-item" style="display: inline-block;">
        <div class="layui-input-inline"><input type="text" name="uname" data- placeholder="用户ID/手机号码"
                                               autocomplete="off" class="layui-input" onclick=""></div>
        <div class="layui-input-inline" style="width:80px">
            <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </div>
    </div>
</div>
<table id="user_list" lay-filter="test"></table>
<script src="../layui/layui.js"></script>
<!-- 开关 -->
<script type="text/html" id="accountState">
    <input type="checkbox" value="{{d.userId}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="lockState" {{ d.userId != 0 ? 'checked' : '' }}>
</script>
<script type="text/html" id="switchTpl">
    <input type="button" onclick="changeUserState('{{d.userId}}')" value="删除" class="layui-btn-danger layui-btn-sm"/>
</script>
<script> layui.use('table', function () {
    var table = layui.table;/*表格实例*/
    table.render({
        elem: '#user_list',
        height: 312,
        url: getWeb() + 'admin/getAllUserList.action' /*数据接口*/,
        method:"post",
        page: true /*开启分页*/,
        cols: [[ /*表头*/ {
            field: 'zizeng',
            width: 80,
            title: '序号',
            fixed: 'left',
            templet: '#zizeng',
            sort: true
        }, {field: 'userId', title: '用户编号', width: 100, fixed: 'left'}, {
            field: 'userName',
            title: '用户名',
            width: 100,
            sort: true
        }, {field: 'phone', title: '手机号码', width: 100,}, {field: 'email', title: '电子邮箱', width: 100,}, {
            field: 'ip',
            title: '登录IP',
            width: 100,
        }, {field: 'freeSpace', title: '空间容量', width: 120, sort: true}, {
            field: 'lock',
            title: '用户状态',
            width: 100,
            templet: "#accountState"
        }, {field: 'regTime', title: '注册时间', width: 120, sort: true}, {
            field: 'upTime',
            title: '更新时间',
            width: 120,
            sort: true
        }, {field: 'lock', title: '操作', width: 100, templet: '#switchTpl', unresize: true}]],
        toolbar: true/*开启打印，导出*/
    });
    //监听开关操作
    let form = $("#accountState")
    form.on('switch(lockState)', function(obj){
        layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    });
});
</script>
<script type="text/html" id="zizeng"> {{d.LAY_TABLE_INDEX+1}}</script>
</body>
</html>